🔗 Issue Links

https://linear.app/stream/issue/IOS-794/show-original-translation
https://linear.app/stream/issue/IOS-823/customizing-message-view-display-logic

🎯 Goal

• Introduce a new MessageViewModel so it is easier to customise the message view logic.
• Add support for showing the original translated message text

📝 Summary

Goal

The main goal of this PR is to introduce the new MessageViewModel which was required to properly implement the original translated message feature without breaking changes or too many hacks. Besides this, a lot of customers want to override the logic of the Message View, especially when to hide or show some views based on business logic.

Requirement

One thing that was important to do was to have a way to share state from the ChatChannelViewModel to the new MessageViewModel, since the MessageViewModel should not have any internal state to not cause unnecessary re-renders. Besides that, since the message view is inside a LazyStack, the state would be overidden whenever the view is recreated. So it is important to provide the message view model to each message view whenever it is created.

🛠 Implementation

Solution

The most common practice is to have item view models as the data of the ListViewModel. So instead of messages: [ChatMessage] as the data, it would be messages: [MessageViewModel]. But because of our LazyCachedMapCollection, and to avoid breaking changes, we can't really do this.

The final solution is to create a factory method in the ChatChannelViewModel, called makeMessageViewModel(message:). This approach allows us to pass data from the channel view model to the message view model, ensuring the view model is always updated whenever the view is re-created. The view model is then passed to the MessageContainerView as an environment object. (Can't be @ObservedObject, otherwise it would be breaking)

UPDATE: In order to avoid environment objects, the strategy was changed. The view model is now created in the makeMessageContainerViewFactory(), and the original translated messages state is controlled by a singleton. If a customer wants to show/hide the original text from the message actions, it is easy, here is an example: 33520f9

🧪 Manual Testing Notes

1. Select the configuration in SwiftUI Demo App
2. Select a language (Ex: ES)
3. Select Leia Organa
4. Go to a Channel that has translated messages
5. Tap on "Show Original" Button
6. Should show original text
7. Tap on "Show Translation"
8. Should show the translation again
9. Long tapping the message should show the correct state in the reactions overlady view

☑️ Contributor Checklist

• I have signed the Stream CLA (required)
• This change should be manually QAed
• Changelog is updated with client-facing changes
• Changelog is updated with new localization keys
• New code is covered by unit tests
• Documentation has been updated in the docs-content repo